<!-- 我的自定义按钮 -->
<template>
    <button class="myButton" :class="{ isBorder: props.isBorder }"
        :style="{ width: props.width + 'px', height: props.height + 'px' }">
        {{ props.content }}
    </button>
</template>

<script setup>
// 三个需求 ： 1. 可自定义按钮文案（确认、取消....） 2. 可自定义按钮宽高 3. 可自定义按钮是否有边框
// const props = defineProps(['content', 'width', 'height', 'isBorder'])
const props = defineProps({
    content: {
        type: String,
        default: '默认',
        validator: (value) => {
            return ['确认', '取消', '默认'].includes(value)
        }
    },
    // content: String,
    width: Number,
    height: Number,
    isBorder: Boolean,
})

</script>

<style scoped>
.myButton {
    background: blue;
    color: white;
    font-size: 14px;
    border-radius: 6px;
    width: 100px;
    height: 50px;
    border: 0;
}

.isBorder {
    border: 2px solid red;
}
</style>